<template>
  <div class="tool-complex">
    <el-table
      :data="tableData.list"
      :height="tableHeight"
      :border="attr.border"
      :show-header="attr.showHeader"
      :resizable="false"
      :cell-style="setCellStyle"
      :header-cell-style="setHeaderCellStyle"
      :style="{
        width: '100%',
        background: 'transparent',
        borderColor: `${
          attr.border ? this.attr.borderColor : 'transparent'
        }!important`,
        borderRight: '1px solid transparent',
        borderBottom: '1px solid transparent',
      }"
    >
      <el-table-column
        v-for="(item, index) in tableData.column"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :sortable="false"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-table",
  mixins: [mixins],
  data() {
    return {
      attr: null,
      tableData: {},
    };
  },
  computed: {
    tableHeight() {
      return this.complex.h;
    },
  },
  methods: {
    setCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      let backgroundColor = this.attr.tableBackground;
      if (this.attr.stripe && !this.attr.vertical) {
        backgroundColor =
          rowIndex % 2 ? this.attr.stripeColor : this.attr.tableBackground;
      } else if (this.attr.stripe && this.attr.vertical) {
        backgroundColor =
          columnIndex % 2 ? this.attr.stripeColor : this.attr.tableBackground;
      }
      return {
        height: `${this.attr.cloumnHeight}px`,
        backgroundColor: backgroundColor,
        color: this.attr.fontColor,
        fontSize: `${this.attr.fontSize}px`,
        fontWidth: 600,
        borderColor: this.attr.borderColor,
      };
    },
    setHeaderCellStyle() {
      return {
        height: `${this.attr.headerHeight}px`,
        backgroundColor: this.attr.headerBackground,
        color: this.attr.headerFontColor,
        fontSize: `${this.attr.headerFontSize}px`,
        fontWidth: 600,
        borderColor: this.attr.borderColor,
      };
    },
  },
  pageData: {
    version: "0.0.3",
    name: "tool-table",
    title: "表格",
    count: 0,
    width: 800,
    height: 400,
    config: {
      label: "基础表格",
      type: "table", // 数据请求方式
      data: {
        key: "tableData",
        value: {
          column: [
            {
              prop: "date",
              label: "日期",
              width: "180",
              sortable: "false",
              align: "center",
              fixed: "right",
            },
            {
              prop: "name",
              label: "姓名",
              width: "auto",
              sortable: "false",
              align: "center",
              fixed: "false",
            },
            {
              prop: "address",
              label: "地址",
              width: "auto",
              sortable: "false",
              align: "center",
              fixed: "false",
            },
          ],
          list: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
      },
      params: null, // 请求参数
      url: "", // 数据请求地址
      active: [], // 交互方法
      attr: [
        {
          key: "colors",
          title: "颜色主题",
          formType: "color-group",
          group: "basics",
          type: "Array",
          data: [
            "#409eff",
            "#0967F2",
            "#ECF6FD",
            "#609BEF",
            "#67C23A",
            "#E6A23C",
            "#F56C6C",
            "#909399",
          ],
        },
        {
          key: "stripe",
          title: "斑马纹",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "vertical",
          title: "斑纹方向",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "stripeColor",
          title: "斑纹颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#409eff",
        },
        {
          key: "border",
          title: "边框",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "borderColor",
          title: "边框颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#ddd",
        },
        {
          key: "showHeader",
          title: "显示表头",
          formType: "radio-select",
          group: "header",
          type: "Boolean",
          data: true,
        },
        {
          key: "headerHeight",
          title: "表头高度",
          formType: "text-number",
          group: "header",
          type: "Number",
          data: 24,
        },
        {
          key: "headerBackground",
          title: "表头颜色",
          formType: "color-picker",
          group: "header",
          type: "String",
          data: "1E4E84",
        },
        {
          key: "headerFontSize",
          title: "字体大小",
          formType: "text-number",
          group: "header",
          type: "Number",
          data: 16,
        },
        {
          key: "headerFontColor",
          title: "字体颜色",
          formType: "color-picker",
          group: "header",
          type: "String",
          data: "#000",
        },
        {
          key: "cloumnHeight",
          title: "行高",
          formType: "text-number",
          group: "table",
          type: "Number",
          data: 24,
        },
        {
          key: "tableBackground",
          title: "行颜色",
          formType: "color-picker",
          group: "table",
          type: "String",
          data: "ECF6FD",
        },
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-number",
          group: "table",
          type: "Number",
          data: 16,
        },
        {
          key: "fontColor",
          title: "字体颜色",
          formType: "color-picker",
          group: "table",
          type: "String",
          data: "#000",
        },
      ],
    },
  },
};
</script>

<style lang="sass" scoped>
.tool-complex
  width: 100%
  height: 100%
  transition: all 0.58s
</style>